<template>
  <view class="food-category">
    <view class="category-item" v-for="(item, index) in categories" :key="index" @tap="onCategoryTap(item)">
      <image :src="item.icon" mode="aspectFit"></image>
      <text>{{item.name}}</text>
    </view>
  </view>
</template>

<script setup>
const categories = [
  { name: '奶茶咖啡', icon: '/static/icons/drink.png' },
  { name: '小吃快餐', icon: '/static/icons/fast-food.png' },
  { name: '自助餐', icon: '/static/icons/buffet.png' },
  { name: '面包蛋糕', icon: '/static/icons/bread.png' },
  { name: '烤串', icon: '/static/icons/bbq.png' },
  { name: '米粉', icon: '/static/icons/noodle.png' }
]

const emit = defineEmits(['select'])

const onCategoryTap = (item) => {
  emit('select', item)
}
</script>

<style lang="scss" scoped>
.food-category {
  display: flex;
  flex-wrap: wrap;
  padding: 15px;
  background: #fff;
  
  .category-item {
    width: 16.666%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 15px;
    
    image {
      width: 40px;
      height: 40px;
      margin-bottom: 5px;
    }
    
    text {
      font-size: 12px;
      color: #333;
    }
  }
}
</style> 